<!--
 * @Author: early-autumn
 * @Date: 2020-05-21 10:11:11
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 15:37:55
-->
<template>
  <div>
    <el-card class="seeing-project" shadow="never">
      <div slot="header" class="seeing-project__header">
        <span>看诊项目</span>
        <el-select
          v-if="market"
          v-model="currentDisease"
          size="mini"
          style="width: 150px"
          @change="$emit('change', '')"
        >
          <el-option
            v-for="option in marketEntityAllOptionsAll"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
        <el-select
          v-else
          v-model="currentDiseases"
          size="mini"
          style="width: 150px"
          @change="selectChange"
        >
          <el-option
            v-for="option in entityOptionsAll"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
        <el-button
          icon="el-icon-setting"
          size="mini"
          :disabled="market"
          @click="handleSeeingProjectManagerVisible"
        ></el-button>
      </div>

      <div v-if="market" class="seeing-project__main">
        <el-checkbox-group v-model="seeingProjectCheckList">
          <el-row :gutter="20">
            <el-col
              v-for="seeingProjects in seeingProjectOptions"
              :key="seeingProjects.id"
              style="margin-bottom: 15px"
              :span="12"
            >
              <el-checkbox :label="seeingProjects.name">
                {{ seeingProjects.name }}
              </el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </div>
      <div v-else class="seeing-project__main">
        <el-checkbox-group v-model="seeingProjectCheckList">
          <el-row :gutter="20">
            <el-col
              v-for="seeingProject in seeingProjectOption"
              :key="seeingProject.id"
              style="margin-bottom: 15px"
              :span="12"
            >
              <el-checkbox :label="seeingProject.name">
                {{ seeingProject.name }}
              </el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </div>
    </el-card>

    <seeing-project-manager
      v-model="seeingProjectManagerVisible"
      @update="getList"
    ></seeing-project-manager>
  </div>
</template>

<script>
import { listItem } from '@/api/services/item'
import { marketEntityAllOptions } from '@/utils/options'
import { entityAllOptions } from '@/utils/options'

import market from '../../../../../store/modules/market'

export default {
  name: 'SeeingProject',
  components: {
    SeeingProjectManager: () => import('./SeeingProjectManager'),
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    types: {
      type: String,
      default: '',
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 当前病种
      currentDisease: '',
      currentDiseases: '',
      // 看诊项目管理器
      seeingProjectManagerVisible: false,
      // 看诊项目列表
      seeingProjectList: [],
      market: false,
      // 显示过滤后的看诊项目列表
      filterSeeingProjectList: [],
      // 原始看诊项目列表
      requestSeeingProject: [],
    }
  },
  computed: {
    entityOptionsAll() {
      return [{ label: '全部', value: '' }, ...entityAllOptions]
    },
    marketEntityAllOptionsAll() {
      return marketEntityAllOptions
    },
    seeingProjectOptions() {
      return this.currentDisease === ''
        ? this.seeingProjectList
        : this.seeingProjectList.filter(
            (i) => i.firstCategory === this.currentDisease
          )
    },
    seeingProjectOption() {
      return this.currentDiseases === ''
        ? this.seeingProjectList
        : this.seeingProjectList.filter(
            (i) => i.firstCategory === this.currentDiseases
          )
    },
    seeingProjectCheckList: {
      get() {
        return this.value.split(',')
      },
      set(e) {
        this.$emit('change', e.filter((i) => !!i.trim()).join(','))
      },
    },
  },
  watch: {
    show(val) {
      if (val) {
        this.getList()
        setTimeout(() => {
          this.showSeeingProject()
        }, 300)
      }
    },
  },
  async mounted() {
    await this.getList()
    if (this.$route.path == '/market/marketView') {
      this.currentDisease = '成人-牙周护理'
      this.market = true
      setTimeout(() => {
        this.seeingProjectList = this.requestSeeingProject
      }, 300)
    }
    this.showSeeingProject()
    if (this.types != '') {
      this.currentDisease = ''
    }
  },
  methods: {
    selectChange(e) {
      if (e == '') {
        this.seeingProjectList = this.filterSeeingProjectList
      } else {
        this.seeingProjectList = this.requestSeeingProject
      }
      this.$emit('change', '')
    },
    showSeeingProject() {
      this.seeingProjectList = this.requestSeeingProject
        .reverse()
        .filter((item, index, arr) => {
          const _index = this.requestSeeingProject.findIndex((_item) => {
            return item.name == _item.name
          })
          return index == _index
        })
      this.filterSeeingProjectList = this.seeingProjectList
      return this.seeingProjectList
    },
    /**
     * 显示看诊项目管理器
     */
    handleSeeingProjectManagerVisible() {
      this.seeingProjectManagerVisible = true
    },
    /**
     * 查询看诊项目列表
     */
    async getList() {
      try {
        this.loading = true

        const { code, rows } = await listItem({
          pageNum: 1,
          pageSize: 10000000,
        })
        if (code === 200) {
          this.requestSeeingProject = rows
        }
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.seeing-project {
  width: 100%;
  height: 500px;

  .seeing-project__header {
    margin-top: -5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .seeing-project__main {
    width: 100%;
    height: 500px;
    overflow-y: scroll;
  }
}
</style>
